<template>
  <div class="menulist">
    <jc-button
      :btn-arr="['reload', 'newy', 'sub', 'remove', 'pass']"
      :disab-arr="['copy']"
      @audit="audit(1)"
      @noAudit="audit(2)"
      @submit="submit(1)"
      @noSubmit="submit(2)"
      @refresh="getMenuList"
      @newly="addMateril"
      @del="delPublic"
    />
    <div class="rateContent">
      <div class="sibarLeft">
        <div style="margin-bottom: 5px">
          <el-button type="primary" size="mini" :disabled="isDisabled" @click.native="addGroup">
            {{ $t('market.addGroup') }}<!--新增分组-->
          </el-button>
          <el-button type="warning" size="mini" :disabled="isDisabled" @click.native="editGroup">
            {{ $t('market.editGroup') }}<!--编辑分组-->
          </el-button>
          <el-button type="danger" size="mini" :disabled="isDisabled" @click.native="deleteGroup">
            {{ $t('market.delGroup') }}<!--删除分组-->
          </el-button>
        </div>
        <el-input v-model.trim="filterText" placeholder="输入关键字进行过滤" />
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          node-key="realId"
          :default-expanded-keys="upfold"
          highlight-current
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="table-content">
        <div class="header-name">
          <search
            :options="selectData"
            :search-son="searchSon"
            :msg="tacitly"
            @seek="collect"
            @hand="getSubjectList"
          />
          <el-button type="primary" class="btn" size="mini" @click="getSubjectList">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
          table-selection
          sortable
          get-row-keys="fid"
          @selectionChange="selectSubject"
        >
          <template v-slot:tagSlot="col">
            <el-tag :type="col.scope.row.stateColor">{{ col.scope.row.fdocumentstatus }}</el-tag>
          </template>
          <template v-slot:btnSlot="col">
            <el-button
              type="success"
              size="mini"
              :disabled="col.scope.row.initSymbol === 1"
              @click="initialized(col.scope.row)"
            >{{ $t('market.initialize') }}<!--初始化--></el-button>
            <el-button type="warning" size="mini" @click="editDetail(col.scope.row.fid)">{{ $t('btn.edit') }}</el-button>
          </template>
        </jc-table>
        <div class="footer">
          <jc-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="getSubjectList"
          />
        </div>
      </div>
    </div>
    <!--  (左边)科目树  -->
    <el-dialog
      v-dialogDrag
      :title="rateTitle"
      model
      :visible.sync="rateVisable"
      :close-on-click-modal="false"
      center
      top="5vh"
      width="500px"
    >
      <el-form label-width="100px" :model="groupData">
        <el-form-item :label="$t('market.groupingName')">
          <el-input v-model.trim="groupData.fname" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('shop.fnumber')">
          <el-input v-model.trim="groupData.fnumber" size="mini" :disabled="rateTitle === $t('market.editSubjectTree')" />
        </el-form-item>
        <el-form-item :label="$t('market.upOneLevel')">
          <el-input v-model.trim="groupData.parentName" size="mini" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rateVisable = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="insertGroup">{{ $t('btn.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!--  新增科目  -->
    <el-dialog
      v-dialogDrag
      :title="jectTitle"
      model
      :visible.sync="jectVisable"
      :close-on-click-modal="false"
      center
      top="5vh"
      width="600px"
    >
      <el-form label-width="100px" :model="jectData">
        <el-form-item :label="$t('market.subjectNum')">
          <el-input v-model.trim="jectData.fnumber" :disabled="jectData.fid" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.subjectName')">
          <el-input v-model.trim="jectData.fname" size="mini" :disabled="isDisabled1" />
        </el-form-item>
        <el-form-item :label="$t('shop.fmodel')">
          <el-input v-model.trim="jectData.fzjcode" size="mini" :disabled="isDisabled1" />
        </el-form-item>
        <el-form-item :label="$t('market.tobalance')">
          <el-select v-model="jectData.ftobalanceId" size="mini" :disabled="isDisabled1">
            <el-option
              v-for="iten in billData"
              :key="iten.fid"
              :label="iten.fname"
              :value="iten.fvalue"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('market.toamount')">
          <el-select v-model="jectData.ftoamountId" size="mini" :disabled="isDisabled1">
            <el-option
              v-for="iten in billTypeData"
              :key="iten.fvalue"
              :label="iten.fname"
              :value="iten.fvalue"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('market.subjectType')">
          <el-input v-model.trim="jectData.fsubjectTypeName" disabled size="mini">
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="isSubjectVis=true"
            />
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('market.descrip')">
          <el-input v-model.trim="jectData.fdescription" size="mini" :disabled="isDisabled1" />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="jectData.isXjkm" :disabled="isDisabled1">{{ $t('market.isXjkm') }}<!--现金科目--></el-checkbox>
          <el-checkbox v-model="jectData.isXjdjw" :disabled="isDisabled1">{{ $t('market.isXjdjw') }}<!--现金等价物--></el-checkbox>
          <el-checkbox v-model="jectData.isYhkm" :disabled="isDisabled1">{{ $t('market.isYhkm') }}<!--银行科目--></el-checkbox>
          <el-checkbox v-model="jectData.isCrjz" :disabled="isDisabled1">{{ $t('market.isCrjz') }}<!--出日记账--></el-checkbox>
          <el-checkbox v-model="jectData.isQmdh" :disabled="isDisabled1">{{ $t('market.isQmdh') }}<!--期末调汇--></el-checkbox>
        </el-form-item>
      </el-form>
      <div style="width: 80%;margin-left: 100px">
        <div style="margin-bottom: 5px;">
          <el-button size="mini" @click="newly">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
        </div>
        <jc-table :table-header="tableHeader2" :table-data="tableData2" serial table-height="200px" @rowClick="rowClick">
          <el-table-column :label="$t('market.dimension')" width="200" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.fname" :disabled="isDisabled1" size="mini">
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="openDimen(scope.$index)"
                />
              </el-input>
            </template>
          </el-table-column>
        </jc-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="jectVisable = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" :disabled="isDisabled1" @click="insertJect">{{ $t('btn.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!--  初始化科目  -->
    <el-dialog
      v-dialogDrag
      :title="$t('market.initialSubject')"
      model
      :visible.sync="initialVisable"
      :close-on-click-modal="false"
      center
      top="5vh"
      width="600px"
    >
      <el-form label-width="100px" :model="initial">
        <el-form-item :label="$t('market.subjectName')">
          <el-input v-model.trim="initial.fname" disabled size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.money')">
          <el-input v-model.trim="initial.fmoney" size="mini" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="initialVisable = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="initialCon">{{ $t('btn.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!--  科目类别  -->
    <subjectType v-if="isSubjectVis" @subject="subjectData" />
    <!--  维度  -->
    <dimension v-if="isDimension" @dimen="dimenData" />
  </div>
</template>

<script>
import {
  queryFinSubjectTree,
  insertFinNode,
  updateFinNode,
  insertSubject,
  updateSubject,
  querySubjectList,
  notsubmitSubjects, submitSubjects,
  reviewSubjects, delSubjects, notreviewSubjects,
  delFinNode, initSubject, querySubjectDetails
} from '@/api/financial/subject'
import { toMxBmina } from '@/components/ToMxamineState'
import { queryViewItem } from '@/api/marketManage/marketOrder'
import jcButton from '@/components/Button'
import toPlace from '@/views/financial/subject/mixin'
import subjectType from '@/views/financial/subject/component/subjectType'
import dimension from '@/views/financial/subject/dimension'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
export default {
  name: 'Subject',
  components: {
    search,
    jcButton,
    dimension,
    subjectType
  },
  mixins: [toPlace, searData],
  data() {
    return {
      fbillNo: 'fgroupName',
      ftype: '89',
      treeData: [
        {
          nodeType: 1,
          nodeName: '全部',
          realId: 0,
          otherInfo: { parentName: '' },
          childList: []
        }
      ],
      defaultProps: {
        children: 'childList',
        label: 'nodeName'
      },
      rateTitle: '新增科目树',
      rateVisable: false, // 科目树弹窗
      jectTitle: '新增科目',
      jectVisable: false, // 新增修改科目
      isSubjectVis: false, // 科目类别
      initialVisable: false, // 初始化
      isDimension: false, // 维度
      groupData: {}, // 科目树
      jectData: {}, // 科目
      upfold: [0],
      isDisabled: false, // 新增编辑分组
      isDisabled1: false, // 科目新增修改
      tableData: [],
      tableHeader: [
        { label: this.$t('market.subjectNum'), prop: 'fnumber' },
        { label: this.$t('market.subjectName'), prop: 'fname' },
        { label: this.$t('market.fmodel'), prop: 'fzjcode' },
        { label: this.$t('market.tobalance'), prop: 'ftobalanceName' },
        { label: this.$t('market.toamount'), prop: 'ftoamountName' },
        { label: this.$t('market.money'), prop: 'fmoney' },
        { label: this.$t('market.dimension'), prop: 'dimensionString' },
        { label: this.$t('market.descrip'), prop: 'fdescription' },
        { label: this.$t('market.documentstatus'), type: 'tag', prop: 'fdocumentstatus' },
        { label: this.$t('market.handle'), type: 'btn', width: '200' }
        // { label: '现金科目', prop: 'isXjkm', width: '80' },
        // { label: '现金等价物', prop: 'isXjdjw', width: '80' },
        // { label: '银行科目', prop: 'isYhkm', width: '80' },
        // { label: '出日记账', prop: 'isCrjz', width: '80' },
        // { label: '期末调汇', prop: 'isQmdh', width: '80' }
      ],
      initial: {}, // 初始化数据
      filterText: '',
      tableHeight: '75vh',
      total: 0,
      currentPage: 1,
      size: 200,
      billData: [], // 余额方向
      billTypeData: [], // 发生额方向
      tableHeader2: [],
      tableData2: [
        { fname: '', fid: 0 }
      ]
    }
  },
  watch: {
    // 过滤
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getMenuList() // 科目树
  },
  methods: {
    // 菜单数据
    async getMenuList() {
      const { data: res } = await queryFinSubjectTree({})
      this.treeData[0].childList = res
    },
    // 点击菜单
    handleNodeClick(data) {
      // nodeType===0 不可新增、编辑
      this.isDisabled = data.nodeType === 0
      this.groupData = data
      this.realId = data.realId
      this.getSubjectList()
    },
    // 新增
    addGroup() {
      this.groupData = {
        fname: '',
        fnumber: '',
        fparentId: this.realId,
        parentName: this.groupData.otherInfo.parentName || ''
      }
      this.rateVisable = true
      this.rateTitle = this.$t('market.addSubjectTree') // 新增科目树
    },
    // 保存 || 修改 科目树
    insertGroup() {
      if (!this.groupData.treeId) {
        insertFinNode({ ...this.groupData }).then(res => {
          if (res.code === 0) {
            this.getMenuList()
            this.upfold[1] = res.data.fparentId
            this.rateVisable = false
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      } else {
        const { fname, fnumber, treeId } = this.groupData
        const DATA = {
          fname,
          fnumber,
          ftreeId: treeId
        }
        updateFinNode(DATA).then(res => {
          if (res.code === 0) {
            this.getMenuList()
            this.rateVisable = false
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      }
    },
    // 修改科目树
    editGroup() {
      this.groupData = {
        fname: this.groupData.nodeName,
        fnumber: this.groupData.otherInfo.fnumber,
        treeId: this.groupData.realId,
        parentName: this.groupData.otherInfo.parentName
      }
      this.rateVisable = true
      this.rateTitle = this.$t('market.editSubjectTree') // 修改科目树
    },
    // 删除科目树分组
    deleteGroup() {
      this.$confirm('确定要删除该科目分组吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        delFinNode({ ftreeId: this.realId }).then(res => {
          if (res.code === 0) {
            this.getMenuList()
            this.upfold[1] = this.groupData.realParentId
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 过滤
    filterNode(value, data) {
      if (!value) return true
      return data.nodeName.indexOf(value) !== -1
    },
    // 科目列表
    getSubjectList() {
      const DATA = {
        ftreeId: this.realId || 0,
        pageNum: this.currentPage,
        pageSize: this.size,
        search: this.searCollData
      }
      querySubjectList(DATA).then(res => {
        if (res.code !== 0) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
        this.tableData = res.data.list.map(item => {
          item.isXjkm = !!item.isXjkm
          item.isXjdjw = !!item.isXjdjw
          item.isYhkm = !!item.isYhkm
          item.isCrjz = !!item.isCrjz
          item.isQmdh = !!item.isQmdh
          item.ftobalanceId = String(item.ftobalanceId)
          item.ftoamountId = String(item.ftoamountId)
          return toMxBmina(item)
        })
        this.total = res.data.total
      })
    },
    // 新增科目
    addMateril() {
      this.jectData = { // 科目
        fnumber: '',
        fname: '',
        fzjcode: '',
        ftobalanceId: '1',
        ftoamountId: '1',
        fdescription: '',
        fsubjectTypeName: this.groupData.otherInfo.fsubjectTypeName,
        fsubjectTypeId: this.groupData.otherInfo.fsubjectTypeId,
        isXjkm: false,
        isXjdjw: false,
        isYhkm: false,
        isCrjz: false,
        isQmdh: false
      }
      this.tableData2 = [{ fname: '', fid: '' }]
      this.jectTitle = this.$t('market.addSubject') // '新增科目'
      this.jectVisable = true
      this.isDisabled1 = false
      this.purpoorder()
      this.purpoorder1()
    },
    // 修改科目列表明细
    editDetail(fid) {
      this.jectTitle = this.$t('market.editSubject') // '修改科目'
      this.jectVisable = true
      querySubjectDetails({ fid }).then(res => {
        if (res.code === 0) {
          const { isCrjz, isQmdh, isXjdjw, isXjkm, isYhkm, ftoamountId,
            dismensionList, ftobalanceId, fdocumentstatus } = res.data
          this.jectData = {
            ...res.data,
            ftoamountId: ftoamountId + '',
            ftobalanceId: ftobalanceId + '',
            isXjkm: !!isXjkm,
            isXjdjw: !!isXjdjw,
            isYhkm: !!isYhkm,
            isCrjz: !!isCrjz,
            isQmdh: !!isQmdh
          }
          this.tableData2 = dismensionList
          this.isDisabled1 = fdocumentstatus === 'B' || fdocumentstatus === 'C'
        }
      })
      this.purpoorder()
      this.purpoorder1()
    },
    // 余额方向
    async purpoorder() {
      if (this.billData.length > 0) return false
      const { data: RES } = await queryViewItem({ viewName: 'V_SUBJECT_YEFX' })
      this.billData = RES.list
    },
    // 发生额方向
    async purpoorder1() {
      if (this.billTypeData.length > 0) return false
      const { data: RES } = await queryViewItem({ viewName: 'V_SUBJECT_FSEFX' })
      this.billTypeData = RES.list
    },
    // 科目类别选中
    subjectData(ev) {
      if (ev.ftreeId) {
        this.jectData.fsubjectTypeId = ev.ftreeId
        this.jectData.fsubjectTypeName = ev.fname
      }
      this.isSubjectVis = false
    },
    openDimen(index) {
      this.indexSelf = index
      this.isDimension = true
    },
    // 维度选中
    dimenData(ev) {
      this.chongfu = true
      this.tableData2.forEach(res => {
        if (res.fid === ev.fid && ev.fid) {
          this.chongfu = false
        }
      })
      if (ev.fid && this.chongfu) {
        const item = this.tableData2[this.indexSelf]
        item.fname = ev.fname
        item.fid = ev.fid
      } else {
        ev.fid && this.$message.warning('维度不能重复！')
      }
      this.isDimension = false
    },
    // 新增科目
    insertJect() {
      const { isXjkm, isXjdjw, isYhkm, isCrjz, isQmdh } = this.jectData
      const DATA = {
        ...this.jectData,
        isXjkm: isXjkm ? 1 : 0,
        isXjdjw: isXjdjw ? 1 : 0,
        isYhkm: isYhkm ? 1 : 0,
        isCrjz: isCrjz ? 1 : 0,
        isQmdh: isQmdh ? 1 : 0,
        dismensionList: this.tableData2
      }
      const api = !this.jectData.fid ? insertSubject : updateSubject
      api(DATA).then(res => {
        if (res.code === 0) {
          this.getSubjectList()
          // this.getMenuList()
          this.upfold[1] = res.data.ftreeId
          this.jectVisable = false
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    // 科目列表选中
    selectSubject(val) {
      this.selectVal = []
      val.forEach(item => {
        item.fnumber && this.selectVal.push(item.fnumber)
      })
    },
    // 初始化
    initialized(ev) {
      this.initial = {
        fid: ev.fid,
        fmoney: 0,
        fname: ev.fname
      }
      this.initialVisable = true
    },
    // 确定初始化
    initialCon() {
      this.$confirm('每个科目仅可初始化一次,请确认是否要对该科目进行初始化？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { fid, fmoney } = this.initial
        initSubject({ fid, fmoney }).then(res => {
          if (res.code === 0) {
            this.getSubjectList()
            this.initialVisable = false
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
          }
        })
      })
    },
    rowClick(row, column) {
      this.indexSelf = row.index
    },
    // 新增行
    newly() {
      this.tableData2.push({
        fname: '',
        fid: ''
      })
    },
    // 删除行
    delHang() {
      this.tableData2.splice(this.indexSelf, 1)
    },
    // 提交
    submit(ev) {
      const api = ev === 1 ? submitSubjects : notsubmitSubjects
      this.toExamineFun(api)
    },
    // 审核
    audit(ev) {
      const api = ev === 1 ? reviewSubjects : notreviewSubjects
      this.toExamineFun(api)
    },
    // 删除
    delPublic() {
      this.$confirm('确定要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const api = delSubjects
        this.toExamineFun(api)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.menulist {
  @include listBom;
  min-height: 89vh;
  .header {
    position: relative;
    .header-name {
      width: 100%;
    }
    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
  .el-form {
    .el-form-item {
      margin: 0;
    }
  }
  .rateContent {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 5px;
    .sibarLeft {
      width: 20%;
      min-width: 270px;
      max-height: calc(100vh - 130px);
      overflow: auto;
      border-right: 1px solid #eee;
    }
    .table-content {
      width: 80%;
      margin-left: 10px;
      position:relative;
      .header-name{
        width: 100%;
        margin-bottom: 15px;
      }
      .btn{
        transform: translateY(18%);
        margin-left: 450px !important;
      }
    }
  }
}
</style>
